<template>
  <el-row>
    <el-col :span="22" :offset="1" >
      <div class="amap-page-container">
        <el-amap-search-box  class="search-box"
                             :search-option="amap.searchOption"
                             :on-search-result="onSearchResult"
                             :center="amap.center"></el-amap-search-box>
        <div style="width: 1800px;height: 1000px;margin-top: -35px; border: #2c3e50 solid 1px;">
          <el-amap vid="amapDemo" :zoom="amap.zoom" :center="amap.center" class="amap-demo">
            <el-amap-marker :position="amap.marker.position" :events="amap.marker.events"
                            :visible="amap.marker.visible" :draggable="amap.marker.draggable"></el-amap-marker>
          </el-amap>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<!-- vid = 地图容器节点的ID。
 zoom = 缩放级别
 center = 地图可见区域的中心点
 marker = 覆盖物
 visible = 显示点标记
 draggable = 设置点标记是否可拖拽移动，默认为false。
 -->
<style>
.search-box {
  position: absolute;
  top: 25px;
  left: 25px;
}
</style>
<script>
import { getNowLocation } from "@/api/system/maps";
module.exports = {
  name: 'amap-page',
  data() {
    return {
      amap: {
        zoom: 14,
        center: [116.7833687777778, 31.89548288888889],
        marker: {
          position: [116.7833687777778, 31.89548288888889],
          events: {
            click: (e) => {
              alert('click marker');
              let {lng, lat} = e.lnglat;
              this.amap.lng = lng;
              this.amap.lat = lat;
              this.amap.center = [e.lnglat.lng, e.lnglat.lat]
            },
            dragend: (e) => {
              console.log('---event---: dragend')
              console.log(e.lnglat.lng, e.lnglat.lat)
              this.amap.marker.position = [e.lnglat.lng, e.lnglat.lat];
            }
          },
          visible: true,
          draggable: false, // 设置点标记是否可拖拽移动，默认为false。
        },
        // lng: 0,
        // lat: 0,
        // address:'',
        // q: '',
        searchOption: {
          city: '全国',
          citylimit: true
        }
      },
      form:{
        lng:"",
        lat:"",
        address:""
      },

      getmap:{

      }


    };
  },
  created() {
    // 在组件创建时从路由参数中获取数据
    this.form.address = this.$route.params.address;
    this.form.lat = parseFloat(this.$route.params.lat);
    this.form.lng = parseFloat(this.$route.params.lng);
    console.log(`地址: ${this.form.address}, Latitude: ${this.form.lat}, Longitude: ${this.form.lng}`);
    if(this.form.address!=null && this.form.lng !=null && this.form.lat !=null){
      // 更新地图中心点和标记位置
      this.amap.center = [this.form.lng, this.form.lat];
      this.amap.marker.position = [this.form.lng, this.form.lat];
    }else {
      this.map()
    }

  },
  methods: {
    onSearchResult(pois) {
      let latSum = 0
      let lngSum = 0
      pois.forEach(poi => {
        lngSum += poi.lng
        latSum += poi.lat
      })
      let center = {
        lng: lngSum / pois.length,
        lat: latSum / pois.length
      }
      var address = pois[0].address;
      console.log(center.lng, center.lat);
      this.amap.center = [center.lng, center.lat]
      this.amap.marker.position = [center.lng, center.lat]
      this.form.lng = center.lng;
      this.form.lat = center.lat;
      this.form.address = address;
      console.log(this.form.address);
    },
    map(){
      getNowLocation().then(response => {
        this.getmap=response
        // 使用 split 方法根据逗号分隔符拆分字符串
        let [longitude, latitude] = this.getmap.split(',');
        this.amap.center = [longitude, latitude];
        this.amap.marker.position = [longitude, latitude];
        // 打印经度、纬度以及 response
        console.log(`经度: ${longitude}, 纬度: ${latitude}, Response: ${response}`);
      })
    },
  },
};
</script>
